<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="opAdd">新增</el-button>
				<el-button type="info" plain icon="el-icon-delete" @click="opBatchDelete">删除</el-button>
			</div>
			<div class="right-panel">
				<el-button :icon="Search"   type="primary" @click="opBindData">
					查询
				</el-button>
				<el-button :icon="Search" type="info" plain @click="resetSearch">
					重置
				</el-button>
				<el-button text type="primary" @click="showCondition = !showCondition">
					<span v-if="!showCondition">展开</span>
					<span v-else>收起</span>
					<vab-icon class="vab-dropdown" :class="{ 'vab-dropdown-active': fold }" icon="arrow-up-s-line" />
				</el-button>
			</div>
		</el-header>
		<el-foot v-show="showCondition">
			<vab-query-form-top-panel>
				<el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px; margin-right: 20px">
					<el-row type="flex" style="flex-wrap: wrap">
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
							<el-form-item label="编号" label-width="100px" style="width: 100%">
								<el-input placeholder="---请输入编号---" v-model="queryList.materialTypeCode"
									style="width: 100%" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
							<el-form-item label="名称" label-width="100px" style="width: 100%">
								<el-input placeholder="---请输入名称---" v-model="queryList.materialTypeName"
									style="width: 100%" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
							<el-form-item label="父级名称" label-width="100px" style="width: 100%">
								<el-select placeholder="---请选择父级---" v-model="queryList.parentId" style="width: 100%">
									<el-option label="---请选择---" value />
									<el-option v-for="item in optionsDic" :key="item.materialTypeId"
										:label="item.materialTypeName" :value="item.materialTypeId" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
							<el-form-item label="状态" label-width="100px" style="width: 100%">
								<el-select placeholder="---请选择状态---" v-model="queryList.status" style="width: 100%">
									<el-option label="---请选择---" value />
									<el-option v-for="item in optionsState" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>




				</el-form>
			</vab-query-form-top-panel>
		</el-foot>

		<el-main class="nopadding">
			<scTable ref="mytable" :queryType="'material-type/pages'" :data="listData" :queryList="queryList"
				:column="columnList" :orderList="OrderList" :sort-orders="['asc', 'desc']"
				@selection-change="selectionChange" row-key="materialTypeId" key="materialTypeId" stripe show-summary
				remoteSummary>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="状态" fixed="right" align="center" width="120" sortable prop="status">
					<template #default="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
							@change="setStatus(scope.row)" />
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="260">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small"
								@click="opShow(scope.row, scope.$index)">查看</el-button>
							<el-button text type="primary" size="small"
								@click="opEdit(scope.row, scope.$index)">编辑</el-button>
							<el-popconfirm title="确定删除吗？" @confirm="opDelete(scope.row, scope.$index)">
								<template #reference>
									<el-button text type="warn" size="small">删除</el-button>
								</template>
							</el-popconfirm>
							<el-button text type="success" size="small" @click="opAddSub(scope.row, scope.$index)">
								增加子节点
							</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialogSave" ref="saveDialog" @fatherMethod="opBindData" @success="handleSaveSuccess"
		@closed="dialogSave = false"></save-dialog>
</template>

<script>
import saveDialog from "./save";
import publicjs from "@/api/model/publicjs";
export default {
	name: "materialType",
	components: {
		saveDialog,
		publicjs,
	},
	data() {
		return {
			dialogSave: false,
			showCondition: false,
			selectionRows: [],
			pkList: ["materialTypeId"],
			columnList: [
				{
					label: "分类编号",
					prop: "materialTypeCode",
					width: "180",
					sortable: true,
					hide: false,
					fixed: false,
				},
				{
					label: "分类名称",
					prop: "materialTypeName",
					width: "200",
					sortable: true,
					hide: false,
					fixed: false,
				},
				{
					label: "归属类别编码",
					prop: "parentMaterialTypeCode",
					width: "200",
					sortable: true,
					hide: false,
					fixed: false,
				},
				{
					label: "归属类别名称",
					prop: "parentMaterialTypeName",
					width: "200",
					sortable: true,
					hide: false,
					fixed: false,
				},
				{
					label: "说明",
					prop: "remarks",
					width: "250",
					sortable: true,
					hide: false,
					fixed: false,
				},
			],
			queryList: {
			},
			result: "", // 运行结果
			props1: {
				checkStrictly: true,
				emitPath: false,
			},
			optionsParentCode: [],
			optionsDic: []
		};
	},
	methods: {
		//添加
		opAdd() {
			this.dialogSave = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("Add");
			});
		},
		//添加
		opAddSub(row) {
			this.dialogSave = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("AddSub").setData({ parentId: row.materialTypeId, parentMaterialTypeName: row.materialTypeName, status: 1 });
			});
		},
		//编辑
		opEdit(row) {
			this.dialogSave = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("Edit").setData(row);
			});
		},
		//查看
		opShow(row) {
			this.dialogSave = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.open("Show").setData(row);
			});
		},
		//设置状态
		async setStatus(row) {
			try {
				var returnValue = await this.$API.auth.PostProcessApi.post(
					row.status == 0 ? "material-type/disabled" : "material-type/enable",
					{ materialTypeIds: [row.materialTypeId] }
				);
				if (returnValue.status == 200) {
					this.$message.success("操作成功");
					this.$refs.mytable.getData();
				} else {
					this.$message.error("操作失败:" + returnValue.msg);
				}
			} catch (error) {
				this.loading = false;
				return false;
			}
		},
		//删除
		async opDelete(row) {
			try {
				var returnValue = await this.$API.auth.PostProcessApi.post(
					"material-type/delete",
					{ materialTypeIds: [row.materialTypeId] }
				);
				if (returnValue.status == 200) {
					this.$message.success("操作成功");
					this.$refs.mytable.getData();
				} else {
					this.$message.error("操作失败:" + returnValue.msg);
				}
			} catch (error) {
				this.loading = false;
				return false;
			}
		},
		//批量删除
		async opBatchDelete() {
			this.$confirm(
				`确定删除选中的 ${this.selectionRows.length} 项吗？`,
				"提示",
				{
					type: "warning",
				}
			)
				.then(async () => {
					const materialTypeIds = this.selectionRows.map(
						(p) => p.materialTypeId
					);
					try {
						var returnValue =
							await this.$API.auth.PostProcessApi.post(
								"material-type/delete",
								{ materialTypeIds: [...materialTypeIds] }
							);
						if (returnValue.status == 200) {
							this.$message.success("操作成功");
							this.$refs.mytable.getData();
						} else {
							this.$message.error("操作失败:" + returnValue.msg);
						}
					} catch (error) {
						this.loading = false;
						return false;
					}
				})
				.catch(() => { });
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selectionRows = selection;
		},

		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == "Add") {
				this.$refs.mytable.refresh();
			} else if (mode == "Edit") {
				this.$refs.mytable.refresh();
			}
		},
		async opBindData() {
			this.$refs.mytable.clearSort();
			this.$refs.mytable.getData();
		},
		resetSearch() {
			this.queryList = {};
		},
		async initOptions() {
			try {
				var returnValue = await this.$API.auth.PostProcessApi.post(
					"base-dictionary/options",
					{ Codes: ["Status"] }
				);
				if (returnValue.status == 200) {
					this.optionsState = returnValue.response.find(p => p.code == "Status").optionsDetails;
				} else {
					this.$message.error("操作失败:" + returnValue.msg);
				}
			} catch (error) {
				this.loading = false;
				return false;
			}

			try {
				var returnValue = await this.$API.auth.PostProcessApi.post(
					"material-type/options",
					{ parentId: 0 }
				);
				if (returnValue.status == 200) {
					this.optionsDic = returnValue.response;
				} else {
					this.$message.error("操作失败:" + returnValue.msg);
				}
			} catch (error) {
				this.loading = false;
				return false;
			}
		},
	},
	async mounted() {
		await this.initOptions();
		await this.opBindData();
	},
};
</script>
